<template>
  <el-card class="forget-card">
    <div slot="header" class="clearfix">
      <span>找回密码</span>
    </div>
    <el-form
      ref="forgetFormRef"
      label-position="right"
      :model="forgetForm"
      label-width="80px"
      :rules="rules"
    >
      <el-row>
        <el-form-item label="账号" prop="loginName">
          <el-input
                  prefix-icon="el-icon-user"
                  v-model="forgetForm.loginName"
                  placeholder="请输入需要找回密码的账号"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="邮箱" prop="email">
            <el-input
                    prefix-icon="el-icon-message"
                    placeholder="请输入此账号下的绑定邮箱"
                    v-model="forgetForm.email"
                    @keyup.enter.native="btnFind"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button size="small" class="send-btn" round :loading="isLoading" @click="btnSend">发送验证码</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="验证码" prop="code">
          <el-input
                  v-model="forgetForm.code"
                  placeholder="请输入验证码"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
                  show-password
                  v-model="forgetForm.newPassword"
                  placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input
                  show-password
                  placeholder="请再输入一次新密码"
                  v-model="forgetForm.checkPassword"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-button type="warning" class="find-btn" round @click="btnResetPass">重置密码</el-button>
      <el-button type="primary" class="back-btn" round @click="btnBack"
        >返回登录</el-button
      >
    </el-form>
  </el-card>
</template>

<script>
  import {api_resetPassword, api_sendCode} from "../api/admin";

export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    var checkPassword = (rule, value, callback)=>{
      const newPassword = this.forgetForm.newPassword
      if(!value){
        return callback(new Error('请再一次输入新密码'))
      }
      setTimeout(() => {
        if(newPassword == value){
          callback()
        }else{
          callback(new Error('两次输入不一致'))
        }
      }, 100)
    }
    return {
      isLoading: false,
      forgetForm: {
        loginName: '',
        email: null,
        password:null,
        newPassword:null,
        checkPassword:null,
        code:null,
      },
      rules: {
        loginName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        email: [{ required: true, validator: checkEmail, trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        checkPassword: [{ required: true, validator: checkPassword, trigger: 'blur' }],
      },
      code:null,
    }
  },
  methods: {
    btnFind() {},
    btnBack() {
      this.$router.push('/')
    },
    async btnSend(){
      this.isLoading = true
      if(this.forgetForm.email===null){
        this.isLoading = false
        this.$message.error('请输入邮箱');
        return
      }
      //请求验证码api_sendCode
      let params = new URLSearchParams()
      params.append('mailTo', this.forgetForm.email)
      const { data: res } = await api_sendCode(params)
      this.isLoading = false
      console.log(res)
      this.code = res.data
    },
    async btnResetPass(){
      if(this.code!==this.forgetForm.code){
        this.$message.error('验证码错误');
        return
      }
      this.forgetForm.password = this.forgetForm.newPassword
      const { data: res } = await api_resetPassword(this.forgetForm)
      if(!res.success){
        this.$message.error(res.msg);
        return
      }
      //跳转到登录页面
      this.$message({
        message: res.msg,
        type: 'success',
      })
      await this.$router.replace('/login')
    }
  },
}
</script>

<style scoped>
.forget-card {
  width: 480px;
  margin: auto;
  transform: translateY(150%);
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.clearfix {
  text-align: center;
  font-family: '幼圆';
  font-size: 20px;
}
.forget-card {
  width: 480px;
  margin: auto;
  transform: translateY(50%);
}
.find-btn {
  width: 48%;
}
.back-btn {
  width: 48%;
}
.send-btn {
  margin-top: 3px;
}
</style>
